<template>
  <div class="box">
    <!-- 音频插件 -->
    <aplayer :music="music?music:''"></aplayer>

    <i class="iconfont icon-xiazai2" @click="downloadRecorder"></i>
  </div>
</template>

<script>
// 引入音频插件
import aplayer from 'vue-aplayer'
export default {
  props: ['url'],
  components: {
    aplayer // 音频组件
  },
  data () {
    return {
      music: {
        // src: this.getUrl()
        src: this.url
      }
    }
  },
  methods: {
    getUrl () {
      if (this.url) {
        // console.log("获取URL")
        return this.url
      } else {
        return ""
      }
    },
    // 为录音命名
    filerName (url) {
      console.log('命名');
      // 提取下载的文件名
      let a = url.split('/');
      return a[a.length - 1];
    },
    // 文件下载方法
    downLoadFile (url) {
      console.log('处理文件');
      var eleLink = document.createElement('a');
      eleLink.style.display = 'none';
      eleLink.download = this.filerName(url);
      var blob = new Blob([url]);
      eleLink.href = URL.createObjectURL(blob);
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
    },
    // 下载录音
    downloadRecorder () {
      console.log('下载');
      this.downLoadFile(this.url)
    }
  },
}
</script>
<style lang="less" scoped>
.box {
  position: relative;
  width: 24.875rem;
  height: 4.375rem;
  margin-top: 0.625rem;
}
.iconfont {
  position: absolute;
  right: 1.375rem;
  top: 1.5625rem;
  color: #999;
  cursor: pointer;
  font-size: 0.75rem;
}
.icon-xiazai2:hover {
  color: #000;
}
.aplayer {
  width: 24.875rem;
  margin: auto;
  height: 4.375rem;
  border-radius: 2.1875rem;
  background-color: #f2f2f2;
}
/deep/.aplayer-pic {
  background-image: url("");
  width: 3.125rem;
  height: 3.125rem;
  margin-top: 0.625rem;
  margin-left: 0.625rem;
}
/deep/.aplayer-bar-wrap .aplayer-bar {
  height: 0.375rem;
  background: #fff;
}
// 加载进度条
/deep/.aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
  height: 0.375rem;
  background-color: #fff;
}
/deep/.aplayer .aplayer-body .aplayer-info .aplayer-music {
  display: none;
}
/deep/.aplayer-controller,
.aplayer-controller .aplayer-time {
  -webkit-margin-top-collapse: 1.25rem;
}
/deep/.aplayer .aplayer-body .aplayer-info {
  padding: 1.625rem 2.5rem 0 0 !important;
}
/deep/.aplayer .aplayer-pic .aplayer-pause {
  left: 0.625rem;
  bottom: 0.625rem;
  width: 1.625rem;
  height: 1.625rem;
}
/deep/.aplayer-pic .aplayer-pause .aplayer-icon-pause {
  top: 0.1875rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
}
// 播放进度条
/deep/.aplayer-bar-wrap .aplayer-bar .aplayer-played {
  height: 0.375rem;
  background-color: #ff5e4e;
}
/deep/.aplayer-played {
  background-color: #ff5e4e !important;
}
// 隐藏进度条的小滑块
/deep/.aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
  width: 0;
  height: 0;
  border: none;
}
/deep/.aplayer-pic .aplayer-button {
  transition: none;
}
// 控制音量调的高度
/deep/.aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
  height: 1.5625rem;
}
</style>
